<template>
  <!-- 会员类型管理 -->
  <!-- 杨珅 2023年6月15日19:33:19 -->
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-s-home" style="font-weight:bold"></i> 后台管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">会员类型管理</a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card style="margin-top:20px">
      <div style="background-color:white;">
        <el-button type="primary" @click="openadd()" style="margin-left:900px;" size="small">新增</el-button>
        <!-- 批量删除 -->
        <el-popconfirm class="ml-5" confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
          title="您确定删除吗？" @confirm="delBath">
          <el-button plain class="el-icon-circle-close" type="primary" slot="reference" size="small">批量删除</el-button>
        </el-popconfirm>
        <!-- 全查 -->
        <el-table :data="MemberData" style="width: 100%; margin-top: 10px; margin-left: 15px;"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="memberType" label="会员类型">
          </el-table-column>
          <el-table-column prop="memberTime" label="有效时长">
          </el-table-column>
          <el-table-column prop="memberPrice" label="价格（元）">
          </el-table-column>
          <el-table-column prop="memberNotes" label="功能简介">
          </el-table-column>
          <el-table-column prop="memberState" label="类型状态">   
            <template slot-scope="scope"> 
              <el-switch v-model="scope.row.memberState" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                inactive-value="2" @change="updatestate(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="最后修改时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="scope">
              <el-button @click="openupdate(scope.row)"
              type="primary"  size="small">修改</el-button>
              <el-button @click="deleteMember(scope.row.id)"
              type="primary"  size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :page-sizes="[7, 20, 30, 40]" :page-size="pages.pageSize" background
          layout="total, sizes, prev, pager, next, jumper" :total="pages.total" :current-page.sync="pages.pageNum"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
      </div>
      <!-- 添加修改弹窗 -->
      <el-dialog :visible.sync="updateadd" width="41%" :before-close="handleClose()" style="text-align:left">
        <div slot="title" class="header-title" style="text-align:left;font-weight: bold;color:white;font-size:18px;margin-bottom: 10px;">
          新增/编辑会员类型
        </div> 
        <el-form stripe style="width: 100%" :model="addfrom">

          <el-form-item prop="memberType" width="300px">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">会员类型</span>
            <el-input style="width:500px;margin-left:48px" v-model="addfrom.memberType"></el-input>
          </el-form-item>
         
          <el-form-item prop="memberPrice" width="300px">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">会员价钱</span>
            <el-input style="width:500px;margin-left:48px" v-model="addfrom.memberPrice"></el-input>
          </el-form-item>

          
          <el-form-item prop="memberTime"  width="300px">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">会员持续时间</span>
            <el-input style="width:500px;margin-left:20px" v-model="addfrom.memberTime"></el-input>
          </el-form-item>


          
          <el-form-item prop="memberNotes" width="300">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">功能简介</span>
            <el-input style="width:500px;margin-left:48px" v-model="addfrom.memberNotes"></el-input>
          </el-form-item>

         
          <el-form-item prop="memberState" width="300">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">状态</span>
            <el-radio v-model="addfrom.memberState" label="1" style="margin-left:80px">启用</el-radio>
            <el-radio v-model="addfrom.memberState" label="2">禁用</el-radio>
          </el-form-item>

        </el-form>
        <div style="text-align:center">
          <el-button style="background-color:rgb(234,244,255);color:rgb(96,169,255)" @click="addMember()">确 定</el-button>
          <el-button @click="updateadd = false" style="background-color:rgb(234,244,255);color:rgb(96,169,255)">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ids: [],//批量删除id
      //全查
      MemberData: [],
      //分页
      pages: {
        total: 0, //数据总条数
        pageNum: 1, //当前页
        pageSize: 7, //每页几条数据
      },
      //添加/编辑表单
      addfrom: {
        id: "",
        memberType: "",
        memberPrice: "",
        memberTime: "",
        memberNotes: "",
        memberState: "",
      },
      //添加修改弹窗
      updateadd: false,
    };
  },
  mounted() {
    this.getMember()
  },
  methods: {
    //全查-模糊查
    getMember() {
      this.$axios
        .get("/member/getMember", {
          params: {
            pageNum: this.pages.pageNum, //当前页
            pageSize: this.pages.pageSize, //每页几条数据
          }
        })
        .then((res) => {
          if (res.data.code) {
            this.MemberData = res.data.data.content;
            this.pages.total = res.data.data.totalSize;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    //打开添加弹窗
    openadd() {
      this.addfrom = {}
      this.updateadd = true;
    },
    //打开编辑弹窗
    openupdate(data) {
      this.addfrom = JSON.parse(JSON.stringify(data)); //回显
      this.updateadd = true;
    },
    //添加/编辑
    addMember() {
      if (!this.addfrom.id) {
        this.$axios
          .post("/member/addMember", this.addfrom)
          .then((res) => {
            if (res.data.code) {
              this.myMessage("success", "添加成功");
              this.getMember()//跳转全查页面
              this.updateadd = false
            }
          })
          .catch((err) => {
            this.myMessage("error", err);
          });
      } else {
        //修改信息
        this.$axios
          .put("/member/updateMember", this.addfrom)
          .then((res) => {
            if (res.data.code) {
              this.myMessage("success", "已启用");
              this.getMember()//跳转全查页面
              this.updateadd = false
            } else {
              this.myMessage("warning", "修改失败！");
            }
          });
      }
    },
    //修改状态
    updatestate(row) {
      this.addfrom = JSON.parse(JSON.stringify(row))
      this.$axios
        .put("/member/updatestate", this.addfrom)
        .then((res) => {
          if (res.data.code) {
            this.updateadd = false
            console.log()
            if(row.memberState=="1"){
              this.myMessage("success", "已启用");
            }else{
              this.myMessage("error", "已禁用");
            }
            
            this.getMember()//跳转全查页面
          } else {
            this.myMessage("warning", "修改失败！");
          }
        });
    },
    //选择数据数量
    handleSelectionChange(val) {
      this.ids = val.map(v => v.id)
      // this.$message.warning("选择了"+this.ids.length+"条数据");
    },
    //批量删除
    delBath() {
      this.$axios.post("/member/deleteMemberByIds", this.ids).then(res => {
        if (res) {
          this.$message.success("批量删除成功！");
          this.getMember()
        } else {
          this.$message.error("删除失败！");
        }
      })
    },
    //逻辑删除
    deleteMember(id) {
      this.$confirm('此操作将注销用户彻底删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/member/deleteMemberById', {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.myMessage('success', '删除成功')
            this.getMember()
          } else {
            this.myMessage('warning', '删除失败')
          }
        }).catch(res => {
          this.myMessage('error', '删除失败，请联系管理员')
        })
      }).catch(res => {
        this.myMessage('info', '已取消删除')
      })
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type
      })
    },

    //分页
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.getMember();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.getMember();
    },
    //信息
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style>
.el-dialog__header {
  background: rgb(93,142,255);
  text-align: center;
}
</style>